<!--
 * @Description: 数据字典列表
 * @Autor: Zhu_liangyu
 * @Date: 2020-05-09 10:52:56
--> 
<template>
  <div>
    <page-table
      rowKey="dictionaryId"
      ref="dictionaryPageTable"
      :columns="columns"
      :query-api="dictionary_queryPageApi"
      :delete-api="dictionary_deletesApi"
      :query-param="queryParam"
      @addClick="addDictionary"
    >
      <template #customCodeId="{text,record}">
        <qc-link @click="editDictionary(record.dictionaryId)">{{text}}</qc-link>
      </template>
    </page-table>
    <a-modal
      title="字典项详情"
      :visible="visible"
      @cancel="()=>{visible=false;this.reloadTable()}"
      :footer="null"
    >
      <dictionary-form
        v-if="visible"
        :dictionary-id="currentDictionaryId"
        :code-item-id="codeItemId"
      ></dictionary-form>
    </a-modal>
  </div>
</template>
<script>
import {
  dictionary_queryPageApi,
  dictionary_deletesApi
} from "@/api/cms/dictionary";
import DictionaryForm from "@/views/cms/dictionaryType/component/dictionaryForm";
import { dictionaryTableColumns } from "@/profile/cms/dictionary";
export default {
  props: {
    codeItemId: {
      type: String
    }
  },
  components: { DictionaryForm },
  data() {
    return {
      columns: dictionaryTableColumns,
      dictionary_queryPageApi,
      dictionary_deletesApi,
      queryParam: {
        codeItemId: this.codeItemId
      },
      visible: false,
      currentDictionaryId: undefined
    };
  },
  methods: {
    reloadTable() {
      this.$refs.dictionaryPageTable.reload();
    },
    addDictionary() {
      this.visible = true;
    },
    editDictionary(dictionaryId) {
      this.currentDictionaryId = dictionaryId;
      this.visible = true;
    }
  }
};
</script>